<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- Page & Monaco styling -->
    <link href="styles.css" rel="stylesheet" />
    <title>SysYPlus in Langium</title>
  </head>
  <body>
    <h1>SysYPlus in Langium</h1>

    <!-- Use a wrapper to display Monaco + Canvas side-by-side -->
    <div id="page-wrapper">
      <!-- Monaco half -->
      <div class="half">
        <div class="wrapper">
          <div id="monaco-editor-root"></div>
        </div>
      </div>
      <!-- Canvas half -->
      <div class="half">
        <canvas id="minilogo-canvas" width="500" height="600"></canvas>
      </div>
    </div>

    <!-- Status message location -->
    <div style="text-align: center">
      <span id="status-msg"></span>
    </div>

    <br />
    <footer>
      <br />
      <p style="font-style: italic">Powered by</p>
      <img
        width="125"
        src="https://langium.org/assets/langium_logo_w_nib.svg"
        alt="Langium"
      />
    </footer>
    <!-- Monaco Configuration -->
    <script type="module" src="minilogo.js"></script>
  </body>
</html>
